<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>测试二页面</title>
    </head>
     <body>

        <a href="index.html">测试二页面，点击跳转测试一页面</a>

        <div class="bgm_echo"></div> 
 <div class="bgm_btn">
 <span class="bgm_btn_play"> </span>
 <span class="bgm_btn_stop"> </span> 
 <span class ="bgm_btn_next"> </span> 
 <span class="bgm_btn_rest"> </span>
 </div>
 <audio value="1" id="bgm" controls></audio >
<style>
.bgm_echo{text-align:center;padding:10px 0}
.bgm_btn{width:48px;height:auto;position:fixed;top:150px;left:10px}
.bgm_btn>span{color:#fff;cursor:pointer;display:block;width:48px;height:48px;margin-bottom:10px;background-color:#0090dd;
    background-size:70% 70%;background-repeat:no-repeat;background-position:center}
.bgm_btn>span:nth-child(1){background-image:url(img/play.png)}
.bgm_btn>span:nth-child(2){background-image:url(img/pause.png)}
.bgm_btn>span:nth-child(3){background-image:url(img/next.png)}
.bgm_btn>span:nth-child(4){background-image:url(img/rest.png)}
.bgm_btn>span:hover{background-color:#29a2e3}
.bgm_btn>a{display:block;color:#0090dd;font-weight:bolder;margin-top:20px}
#bgm{display:none}
</style>
<script>
    window.onload = function(){
        //多首歌曲播放效果以及基本的按钮定义
        var bgm_echo = document.querySelector('.bgm_echo');
        var bgm_btn_play = document.querySelector('.bgm_btn_play');
        var bgm_btn_stop = document.querySelector('.bgm_btn_stop');
        var bgm_btn_next = document.querySelector('.bgm_btn_next');
        var bgm = document.getElementById('bgm');
        //播放开始
        bgm_btn_play.onclick = function(){
            bgm.play();
        }
        //播放暂停
        bgm_btn_stop.onclick = function(){
            bgm.pause();
        }
        //初始化播放列表【如果有播放记录，则调用】
        if(localStorage.getItem('bgm_gds') != null){
            bgm.setAttribute('value',localStorage.getItem('bgm_gds'));
            bgm.innerHTML = '<source src="bgm/' + localStorage.getItem('bgm_gds') + '.mp3" type="audio/mpeg">';
            bgm_echo.innerHTML = '当前播放第' + localStorage.getItem('bgm_gds') + '首歌曲';
        }else{
            bgm.setAttribute('value',1);
            bgm.innerHTML = '<source src="bgm/1.mp3" type="audio/mpeg">';
            bgm_echo.innerHTML = '当前播放第1首歌曲';
        }
        //下一首歌曲切换
        bgm_btn_next.onclick = function(){
            var bgm_gds = bgm.getAttribute('value');
            if(bgm_gds < 3){
                bgm_gds++;
            }else{
                bgm_gds = 1;
            }
            bgm.innerHTML = '<source src="bgm/' + bgm_gds + '.mp3" type="audio/mpeg">';
            bgm_echo.innerHTML = '当前播放第' + bgm_gds + '首歌曲';
            bgm.load();
            bgm.play();
            //切换歌曲后，写入代码
            bgm.setAttribute('value',bgm_gds);
            localStorage.setItem('bgm_gds',bgm_gds);
        }
        //音乐播放完成操作
        bgm.onended = function(){
            bgm_btn_next.click();
        };
        //重置所有音频记忆
        var bgm_btn_rest = document.querySelector('.bgm_btn_rest');
        bgm_btn_rest.onclick = function(){
            //停止音乐
            bgm.pause();
            setTimeout(function(){
                //删除记录
                localStorage.removeItem('bgm_gds');
                localStorage.removeItem('bgm_time');
                //重新启动
                bgm.setAttribute('value',1);
                bgm.innerHTML = '<source src="bgm/1.mp3" type="audio/mpeg">';
                bgm_echo.innerHTML = '当前播放第1首歌曲';
                //重新播放
                bgm.load();
                bgm.play();
            },200);
        }
        
        //音轨补偿代码
        setTimeout(function(){
            //获取DOM
            var bgm = document.getElementById('bgm');
            //如果发现有本地存储，则进行音轨补偿
            if(localStorage.getItem('bgm_time') != null){
                bgm.currentTime = localStorage.getItem('bgm_time');
                //启动播放音乐
                bgm.play();
            }
            //不断循环记录播放进度
            window.setInterval(function(){
                //检测是否支持本地存储
                if(typeof(Storage) !== 'undefined'){
                    //写入BGM播放进度
                    localStorage.setItem('bgm_time',bgm.currentTime);
                }else{
                    //提示浏览器不支持
                    var doc_body = document.querySelector('body');
                    doc_body.innerHTML = '<h1>抱歉！您的浏览器过旧，请更换新的浏览器再试</h1>';
                }
            },100);
            //初始化启动BGM
            bgm.play();
        },1000);
    }
</script>

    
    </body>
</html>